function render() {
    axios.get('/students').then(({data:{data}})=>{
        // console.log(data);
       let arr = data.map(item => {
          return `<tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.gender?'女':'男'}</td>
          <td>第${item.group}组</td>
          <td>${item.hope_salary}</td>
          <td>${item.salary}</td>
          <td>${item.province}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i data-id = ${item.id} class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id = ${item.id}></i></a>
          </td>
        </tr>`
        })
        document.querySelector('tbody').innerHTML = arr.join('')
        document.querySelector('b.total').innerHTML = arr.length
    })
   
}
render()

const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
let title = document.querySelector('h5.modal-title')
document.querySelector('#openModal').addEventListener('click',()=>{
    modal.show()
   title.innerHTML = '添加学员'
   document.querySelector('#form').reset()
 
})
let province = document.querySelector('[name = province]')
let city = document.querySelector('[name = city]')
let area = document.querySelector('[name = area]')
async function getprovince() {
    const {data} = await axios.get('/api/province')
    // console.log(data);
    let arr = data.data.map(item =>{
        return `<option value="${item}">--${item}--</option>`
    })
    arr[0] = '<option value="">--省份--</option>'
    province.innerHTML = arr.join('')
}
getprovince()

async function getcity() {
    area.innerHTML = '<option value="">--地区--</option>'
    const {data} = await axios.get('/api/city',{params:{pname:province.value}})
    console.log(data);
    let arr = data.data.map(item =>{
        return `<option value="${item}">--${item}--</option>`
    })
    arr[0] = '<option value="">--城市--</option>'
     city.innerHTML = arr.join('')
}
async function getarea() {
    const {data} = await axios.get('/api/area',{params:{pname:province.value,cname:city.value}})
    console.log(data);
    let arr = data.data.map(item =>{
        return `<option value="${item}">--${item}--</option>`
    })
    arr[0] = '<option value="">--地区--</option>'
    area.innerHTML = arr.join('')
}
province.addEventListener('change',getcity)
city.addEventListener('change',getarea)

document.querySelector('#submit').addEventListener('click',async (e)=>{
    e.preventDefault()
    let fd = val(document.querySelector('#form'))
    console.log(fd);
    fd.gender = +fd.gender
    fd.age = +fd.age
    fd.group = +fd.group
    fd.hope_salary = +fd.hope_salary
    fd.salary = +fd.salary
    if (title.innerHTML === '添加学员') {
        const { data } = await axios.post('/students', fd)
        alert(data.message)
    }
    if (title.innerHTML === '修改学员') {
        const { data } = await axios.put(`/students/${title.dataset.id}`,fd)
        alert(data.message)
    }
     render()
     modal.hide()
})

document.querySelector('tbody').addEventListener('click',async (e)=>{
    if (e.target.classList.contains('bi-trash')) {
        console.log(e.target.dataset.id);
     await axios.delete(`/students/${e.target.dataset.id}`)
      render()
    }
    if (e.target.classList.contains('bi-pen')) {
        modal.show()
        title.innerHTML = '修改学员'
      const {data} = await axios.get(`/students/${e.target.dataset.id}`)
      console.log(data);
      province.value = data.data.province
      await getcity()
      city.value = data.data.city
     await getarea()
      val(document.querySelector('#form'),data.data)
     title.setAttribute('data-id',e.target.dataset.id)
   
    }
})

